<template>
  <div class="authorityEdit">
    <el-dialog
      title="添加/修改角色"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="editCancel"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">角色名称:</span>
            <span class="span2">
              <el-input v-model="editInfo.name" placeholder="请输入角色名称"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">菜单权限:</span>
            <span class="span2">
              <el-tree
                ref="tree"
                :data="menu"
                :props="defaultProps"
                :default-checked-keys="defaultCheck"
                node-key="id"
                show-checkbox
                default-expand-all
              ></el-tree>
            </span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "md5";
export default {
  props: ["message", "flag"],
  data() {
    return {
      editInfo: {
        name: "",
        permissions: ""
      },
      menu: [],
      dialogVisible: true,
      defaultProps: {
        label: "name",
        children: "childs"
      },
      defaultCheck: []
    };
  },
  methods: {
    editCancel() {
      let that = this;
      that.editInfo = {
        id: null,
        name: "",
        permissions: ""
      };
      that.$emit("authorityEdit", {});
    },
    getMenus() {
      let that = this;
      if (that.flag == 1) {
        that.reqData = {};
      } else if (that.flag == 2) {
        that.reqData = {
          id: that.message.id
        };
      }
      that.ajaxJson({
        url: "/system/role/detail",
        data: that.reqData,
        success: function(res) {
          if (res.code == "0") {
            that.menu = res.data.permissions;
            if (res.data.authPermissions) {
              that.defaultCheck = res.data.authPermissions.split(",");
            }
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },

    editSure() {
      let that = this;
      that.editInfo.roleId = that.$refs.tree
        .getCheckedKeys()
        .concat(that.$refs.tree.getHalfCheckedKeys())
        .join(",");
      if (!that.editInfo.name) {
        that.showMsg("请输入姓名", "error");
        return;
      }
      if (!that.editInfo.roleId) {
        that.showMsg("请选择权限角色", "error");
        return;
      }
      if (that.flag == 1) {
        that.ajaxJson({
          url: "/system/role/new",
          data: {
            name: that.editInfo.name,
            permissions: that.editInfo.roleId
          },
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("添加成功", "success");
              that.editCancel();
            } else {
              that.showMsg(res.message, "error");
            }
          }
        });
      } else if (that.flag == 2) {
        that.ajaxJson({
          url: "/system/role/edit",
          data: {
            id: that.editInfo.id,
            name: that.editInfo.name,
            permissions: that.editInfo.roleId
          },
          success: function(res) {
            if (res.code == "0") {
              that.$message({
                type: "success",
                message: "修改成功！"
              });
              that.editCancel();
            } else {
              that.showMsg(res.message, "error");
            }
          }
        });
      }
    }
  },
  mounted() {
    let that = this;
  },
  created() {
    let that = this;
    that.getMenus();
    if (that.message) {
      that.editInfo = that.message;
    }
  }
};
</script>
<style lang="less">
.authorityEdit {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 30% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
